<template>
  <section>
    <el-form label-width="80px" inline style="border: 0px solid red">
      <el-form-item label="" style="border: 0px solid red;">
        <el-row style="display: flex;flex-direction: row;width: 100%">
          <filter-tool class="filtertool" type="departmentId" test="name" v-on:confirm="filterEvent"></filter-tool>
        </el-row>
      </el-form-item>
      <el-form-item label="" style="border: 0px solid red;">
        <search-tool v-on:search="searchEvent"></search-tool>
      </el-form-item>
    </el-form>
    <el-table :data="outList">
      <el-table-column type="index" label="序号"/>
      <el-table-column label="时间" prop="created" :formatter="formatterTime"/>
      <el-table-column label="标题" prop="title"></el-table-column>
      <el-table-column label="来源" prop="departmentId"></el-table-column>
      <el-table-column label="状态" prop="state">
        <template slot-scope="scope">
          <span v-if="scope.row.state === 1" >待执行</span>
          <span v-else-if="scope.row.state === 2" style="color:orangered">执行中</span>
          <span v-else-if="scope.row.state === 3" style="color:green">已完成</span>
          <span v-else>{{errMsg}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <span v-if="scope.row.state === 3">已完成</span>
          <el-button v-else size="mini" type="primary" @click="confirmBtn(scope.row)">生成出库单</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination v-show="totalPage>0" small layout="prev, pager, next" :page-count="totalPage" @current-change="goPage"/>

    <el-dialog title="新建出库单" :visible.sync="showNewDialog" width="80%" v-if="currTask">
      <new-outbound :task="currTask" v-on:success="getList(0,filterObj)"></new-outbound>
    </el-dialog>
  </section>
</template>

<script>
  import searchTool from '@/common/searchTool'
  import filterTool from '@/common/filterTool'
  import newOutbound from '../outbound/newOutbound'
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import Vue from 'vue'//后续添加属性，需要vue联动
  import errHandler from '@/assets/errHandler'
  import dateFormater from '@/common/date-formater'
  export default {
    name: "out",
    components:{newOutbound,searchTool,filterTool},
    data(){
      return{
        outList:null,
        totalPage:0,
        showNewDialog:false,
        currTask:null,
        errMsg:'无该状态',
        filterObj:{}
      }
    },
    created(){
      console.log('获取出库任务------')
      this.getList()
    },
    computed:{
      ...mapGetters(['department']),
    },
    watch: {
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      formatterTime(a,b,c,d){
        return dateFormater.formatDatetime(c)
      },
      goPage(val){
        this.getList(val-1)
      },
      getList(pageNo,filterObj){
        this.fetch({name:"getStockOutTaskList",data:{page:pageNo?pageNo:0,warehouseId: this.department.id,...filterObj}})
          .then(res=>{
            console.log('出库任务-------',res)
            this.outList=res.content
            this.totalPage=res.totalPages
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      confirmBtn(row){
        console.log('生成出库单-----',row)
        this.currTask={
          title:row.title,
          outboundOrderItems:row.outboundOrderItems,
          stockOutTypeCode:row.stockOutTypeCode,
          stockOutTaskId:row.id,
          departmentId:row.departmentId,
          warehouseId:row.warehouseId
        }
        this.showNewDialog=true
      },
      filterEvent(e,objK){
        this.loading=true
        console.log('筛选条事件---------',e,objK)
        for(let key in e){
          if(objK === undefined) this.filterObj[key]=e[key]
          else this.filterObj[objK]=e[key]
        }
        console.log('看下filterObj----------',this.filterObj)
        let tmp={}
        for(let k in this.filterObj){
          if(this.filterObj[k] !== undefined){
            tmp[k]=this.filterObj[k]
          }
        }
        console.log('看下tmp----------',tmp)
        this.getList(0,tmp)//筛选入库单列表
      },
      searchEvent(e){
        this.loading=true
        this.filterObj.key=e
        this.getList(0,this.filterObj)
      }
    }
  }
</script>

<style scoped>
  .filtertool{
    margin: 0 5px;
    width: 110px;
    border:0px solid red;
  }
</style>
